<template>
	<view class="main">
		<view :class="showadvertising ? 'shade':''"></view>
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" @change="lunbotu" circular autoplay="true" :interval="interval" :duration="duration">
				<swiper-item v-for="(i,inx) in homeBannerList" :key="i.id">
					<view @click="goDetails(i.url)" class="swiper-item uni-bg-red">
						<image :src="i.pic" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="dot">
				<view class="dot-lt" :class="lunboStyle == inx ?'dot-active':''" v-for="(i,inx) in homeBannerList"
					:key="i.id"></view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="content-main">
				<view class="content-header" v-if="!token">
					<view class=""></view>
					<view @click="goLogin" class="">登录/注册</view>
				</view>

				<!-- 公告 -->
				<view class="">
					<view class="announcement">
						<view class="">
							<image style="width: 50rpx;height: 50rpx;"
								src="https://www.szzn.group/uploads/20221121/ac4e330a3a7becfa3aeddbfc0ca9707e.png"
								mode=""></image>
						</view>
						<view class="" @click="goAnnouncement">
							<view class="affiche">公告</view>

							<swiper class="swipers" :vertical="true" circular autoplay="true" :interval="intervals"
								:duration="durations">
								<swiper-item v-for="item in affiche" :key="item.id">
									<view class="">{{item.info}}</view>
								</swiper-item>
							</swiper>

						</view>
						<view class="" @click="goAnnouncement">
							<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/27270202209221534514540.png"
								mode=""></image>
						</view>
					</view>
				</view>
				<!-- 果蔬园艺 -->
				<view class="gardenstuff">
					<view @click="gardenHorticulture">
						<image :src="garden.icon" mode="">
						</image>
						<view class="title-image">
							<image class="height"
								src="http://www.szzn.group/uploads/20221105/f3d300964783d8874486f83400632063.png"
								mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
				<!-- 农副产品 -->
				<view class="nf_products">
					<view class="">
						<view @click="agriculturalProduct">
							<image :src="agricultural.icon" mode=""></image>
							<view class="title-image">
								<image src="http://www.szzn.group/uploads/20221105/523e78c35441f01674d77a96a607f69d.png"
									mode="aspectFill"></image>
							</view>
						</view>
						<view @click="agriculturalStudies">
							<image :src="agriculture.icon" mode=""></image>
							<view class="title-image">
								<image src="http://www.szzn.group/uploads/20221105/087a71765ab4d96e72eef487539d1b20.png"
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>

				<!-- 有机餐桌 -->
				<view class="organictable">
					<view class="">
						<view class="">
							<view class="organic" @click="goClass(youji.cid,youji.title)" :key="item.id">
								<view class="">
									<view class="">{{youji.title}}</view>
									<view class="xianmi">鲜米现磨</view>
								</view>
								<view class="jiankang">守护家人健康</view>
								<view class="">
									<swiper class="swiper" :duration="duration">
										<swiper-item>
											<view class="swiper-item uni-bg-red">
												<image :src="youji.image" mode=""></image>
											</view>
										</swiper-item>
									</swiper>
								</view>
							</view>

							<view class="organic" @click="goClass(jieqi.cid,jieqi.title)">
								<view class="solarterms">
									<view class="freshmi">四季养生指南</view>
									<view class="organicdesc">{{jieqi.title}}</view>
								</view>
								<view class="keeplive">顺应时令，科学养生</view>
								<view class="">
									<swiper class="swiper" :duration="duration">
										<swiper-item>
											<view class="swiper-item uni-bg-red">
												<image :src="jieqi.image" mode=""></image>
											</view>
										</swiper-item>
									</swiper>
								</view>
							</view>
						</view>
						<!-- 种植教程 -->
						<view class="">
							<view @click="plantCourse">
								<view class="">种植教程</view>
								<view class="plantcourse">
									<image :src="getzhongzhi.image" mode=""></image>
								</view>
							</view>
							<view class="" v-if="adIndex">
								<view class="">
									<view class="">{{gethaowu[0].title}}</view>
									<view class="">抢专属优惠</view>
								</view>
								<view class="">主播推精品</view>
								<view class="">
									<image v-for="item,index in gethaowu" :key="index" :src="item.image" mode="">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 圈子 -->
				<view class="gardenstuff" @click="forum" v-if="adIndex">
					<view class="">
						<image :src="adIndex.list[0].banner" mode="widthFix">
						</image>
					</view>
				</view>
			</view>
		</view>
		<!-- 热门推荐 -->
		<view class="hotrecommend">
			<view class="hot-tuijian">
				<image src="http://www.szzn.group/uploads/20221107/25aba7b7220f912d893e94a22f61c2a8.png"
					mode="widthFix"></image>
			</view>
			<!-- 商品list -->
			<view class="shopping">
				<view class="">
					<view @click="goDetail(i.id)" class="shopping-list" v-for="(i,inx) in hotRecommend.list"
						:key="i.id">
						<view class="position-image">
							<image :src="i.image" mode=""></image>
							<view class="internetattestation">
								<image src="http://www.szzn.group/uploads/20221107/5bcb9fd5377321902d85d3b159974161.png"
									mode=""></image>
							</view>
						</view>
						<view class="">{{i.title}}</view>
						<view class="">
							<view class="">￥{{i.money}}</view>
							<view class="">{{i.count}}人付款</view>
						</view>
						<view class="menber-price"><text>￥</text>{{i.vip_price}}</view>
						<!-- <view class="shopping-address">长沙市雨花区</view> -->

					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="text" @click="upload"></view>
		<!-- 会员广告 -->
		<view class="advertising" v-if="showadvertising">
			<image :src="advertisingImg" mode=""></image>
			<view @click="hideAdvertising" class="">
				<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/f7a7e202209231016243888.png" mode=""></image>
			</view>
		</view>

		<tabbar @selectTabbar="selectTabbar" ref="tabbar"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabBar/tabBar.vue'
	import {
		homeAdvertising,
		homeAffiche,
		homeBanner,
		homeRecommend,
		homeNavigation,
		getYouji,
		getJieqi,
		getZhongzhi,
		getHaowu
	} from '@/api/api.js'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				showadvertising: false, //是否显示弹窗
				autoplay: true, //自动轮播
				interval: 3000, // 轮播速度
				intervals: 2500, // 轮播速度
				duration: 500, //轮播动画速度
				durations: 600,
				advertisingImg: '', // 弹窗img
				affiche: [], // 公告信息 
				homeBannerList: [], // 轮播图
				agriculture: '', // 农业研学
				agricultural: '', // 农副农资
				garden: '', //果蔬园艺
				hotRecommend: '', //热门推荐
				videoIndex: '', //种植教程
				productIndex: '', //有机餐桌.
				token: '', // token
				image: '', //广告
				lunboStyle: 0, //小圆点样式
				adIndex: '',
				superiorId: '', //上级ID
				youji: '', //餐桌信息
				jieqi: '', //节气信息
				getzhongzhi: '', //种植信息
				gethaowu: [], //好物信息
				fieldNames: '',
				localData: [],
				optionss: []
			};
		},
		// 分享
		onShareAppMessage() {
			return {
				title: '优栽园',
				path: 'pages/home/index/index'
			};
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '优栽园',
				path: 'pages/home/index/index'
			};
		},
		onLoad(options) {
			const sceneStr = decodeURIComponent(options.scene); //这里的值就是二维码里带的参数值
			if (sceneStr != 'undefined') {
				let arr = sceneStr.split('&')
				this.superiorId = arr[1]
				uni.setStorageSync('superiorId', this.superiorId.match(/\d+/g))
			}

			this.token = uni.getStorageSync('token')
			if (uni.getStorageSync('count') == '') {
				this.popupAdvertising()
			}
			this.homeBanner()
			this.homeNavigation()
			this.init()
			this.homeAffiche()
			this.homeRecommend()
			this.getYouji()
			this.getJieqi()
			this.getZhongzhi()
			this.getHaowu()
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			this.$refs.tabbar.current = 0
			this.homeBanner()
			this.homeNavigation()
			this.init()
			this.homeAffiche()
			this.homeRecommend()
			this.getYouji()
			this.getJieqi()
			this.getZhongzhi()
			this.getHaowu()
		},
		methods: {
			// 省市区数据树生成
			get_city_tree() {
				let res = []
				if (cityRows.length) {
					// 递归生成
					res = this.handleTree(cityRows)
				}
				return res
			},

			// 获取餐桌信息
			getYouji() {
				getYouji().then(res => {
					this.youji = res.data.data[0]
				})
			},
			// 获取节气信息
			getJieqi() {
				getJieqi().then(res => {
					this.jieqi = res.data.data[0]
				})
			},
			// 获取种植信息
			getZhongzhi() {
				getZhongzhi().then(res => {
					this.getzhongzhi = res.data.data[0]
				})
			},
			// 获取好物信息
			getHaowu() {
				getHaowu().then(res => {
					this.gethaowu = res.data.data
				})
			},
			// 获取广告信息
			init() {
				homeAdvertising().then(res => {
					if (res.data.code == '200') {
						if (res.data.data.length == 0) {
							return
						} else {
							this.advertisingImg = res.data.data[0].ad
						}
					} else {

					}
				})
			},
			// 小圆点
			lunbotu(e) {
				this.lunboStyle = e.detail.current
			},
			// 获取公告
			homeAffiche() {
				homeAffiche().then(res => {
					if (res.data.code == '200') {
						this.affiche = res.data.data
					} else {

					}
				})
			},
			// 获取banner
			homeBanner() {
				homeBanner().then(res => {
					if (res.data.code == '200') {
						this.homeBannerList = res.data.data
					} else {

					}
				})
			},
			// 首页推荐
			homeRecommend() {
				homeRecommend().then(res => {
					if (res.data.code == '200') {
						this.hotRecommend = res.data.data.hotIndex
						this.adIndex = res.data.data.adIndex
						this.videoIndex = res.data.data.videoIndex
						this.$forceUpdate()
					} else {

					}
				})
			},
			// 获取首页导航
			homeNavigation() {
				homeNavigation().then(res => {
					if (res.data.code == '200') {
						this.garden = res.data.data[0]
						this.agricultural = res.data.data[1]
						this.agriculture = res.data.data[2]
					} else {}
				})
			},

			// 切换tabbar
			selectTabbar(e) {
				uni.switchTab({
					url: e.pagePath
				});
			},

			// 弹出广告
			popupAdvertising() {
				let time = setTimeout(() => {
					this.showadvertising = true
					clearTimeout(time)
					uni.setStorageSync('count', 1)
				}, 1000)
			},
			upload() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://www.szzn.group/api/login/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test' //
							},
							success: (uploadFileRes) => {
								this.image = uploadFileRes.data
							}
						});
					}
				});
			},
			// 隐藏广告
			hideAdvertising() {
				this.showadvertising = false
			},
			// 去登入
			goLogin() {
				uni.navigateTo({
					url: '/page_login/index/index',
					animationType: "slide-in-top",
					animationDuration: 1000
				})
			},
			// 果蔬园艺
			gardenHorticulture() {
				uni.navigateTo({
					url: '/page_home/gardenhorticulture/gardenhorticulture'
				})
			},
			// 农副农资
			agriculturalProduct() {
				uni.navigateTo({
					url: '/page_home/agriculturalproduct/agriculturalproduct'
				})
			},
			// 农业研学
			agriculturalStudies() {
				uni.navigateTo({
					url: '/page_home/agriculturestudies/agriculturestudies'
				})
			},
			// 去详情
			goDetails(id) {
				let detailId = id.match(/\d+/g)
				uni.navigateTo({
					url: '/page_home/agriculturaldetail/agriculturaldetail?id=' + detailId
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/page_home/agriculturaldetail/agriculturaldetail?id=' + id
				})
			},
			// 种植教程
			plantCourse() {
				uni.switchTab({
					url: '/pages/plantcourse/index/index'
				})
			},
			// 去公告
			goAnnouncement() {
				uni.navigateTo({
					url: '/page_home/announcement/announcement'
				})
			},
			// 论坛圈子
			forum() {
				uni.navigateTo({
					url: '/page_forum/index/index'
				})
			},
			// 分类
			goClass(id, name) {
				uni.navigateTo({
					url: `/page_class/classlist/classlist?id=${id}&name=${name}`
				})
			},
			handleTree(data, parent_code = null) {
				let res = []
				let keys = {
					id: 'code',
					pid: 'parent_code',
					children: 'children',

					text: 'name',
					value: 'code'
				}

				let oneItemDEMO = {
					text: '',
					value: '',
					children: []
				}
				let oneItem = {}

				// 循环
				for (let index in data) {
					// 判断
					if (parent_code === null) {
						// 顶级菜单 - 省
						if (!data[index].hasOwnProperty(keys.pid) || data[index][keys.pid] == parent_code) {
							// 不存在parent_code，或者已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]

							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)

						} else {
							// 匹配不到，跳过
						}

					} else {
						// 非顶级菜单 - 市、区、街道
						if (data[index].hasOwnProperty(keys.pid) && data[index][keys.pid] == parent_code) {
							// 已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]

							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)

						} else {
							// 匹配不到，跳过
						}

					}

				}
				return res
			}


		}
	};
</script>

<style lang="scss">
	.main {
		background-color: #fff;
		width: 100vw;
		height: 100%;
	}

	.shade {
		position: fixed;
		width: 100vw;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 10000;
	}


	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		position: relative;
	}

	.swiper {
		height: 468rpx;
	}

	.swipers {
		height: 50rpx;
		line-height: 50rpx;
		width: 400rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.dot {
		position: absolute;
		bottom: 70rpx;
		right: 20rpx;
		font-size: 22rpx;
		padding: 0 10rpx;
		display: flex;
	}

	.dot-lt {
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		background-color: #d9d9d9;
		margin-right: 10rpx;
	}

	.dot-active {
		height: 15rpx;
		border-radius: 10rpx;
		background-color: #289958 !important;
		width: 35rpx !important;
	}

	.swiper-item {
		display: block;
		height: 490rpx;
		line-height: 490rpx;
		text-align: right;
		position: relative;
	}

	.swiper-item>image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.content {
		width: 100%;
		background: url('http://tcyh-1313348853.cos.ap-shanghai.myqcloud.com/tcyh/2022-09-21/tcyh1451991663752022527.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 35rpx 35rpx 0 0;
		position: relative;
		top: -60rpx;
	}

	.content-main {
		padding: 20rpx 25rpx 0;
	}

	.content-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.content-header>view:nth-child(2) {
		font-size: 26rpx;
		color: #fff;
		background-color: #3db963;
		border-radius: 50px;
		padding: 13rpx 20rpx;
	}

	.announcement {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 6rpx 25rpx;
	}

	.announcement>view:nth-child(1) {
		// flex: 0.8;
		width: 60rpx;
		padding: 0 20rpx 0 0;
		font-size: 24rpx;
		margin-right: 20rpx;
		border-right: 1px solid #ddd;
	}

	.announcement>view:nth-child(2) {
		width: 500rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #9c9c9c;
	}

	.announcement>view:nth-child(3) {
		image {
			width: 50rpx;
			height: 50rpx;
			vertical-align: middle;
		}
	}

	.affiche {
		border: 1px solid #6ecb8a !important;
		color: #6ecb8a;
		margin-right: 10rpx;
		display: inline-block;
		border-radius: 8rpx;
		padding: 0 5rpx;
	}

	.affiche-style {
		color: #6ecb8a;
		font-weight: 700;
		font-style: italic;
	}

	.flash {
		font-style: italic;
		font-weight: 700;
	}

	.announcement>view:nth-child(3) {
		flex: 0.7;
		margin: 8rpx 0 0 15rpx;
	}

	.gardenstuff {
		margin: 10rpx 0;

		>view {
			position: relative;

			>image {
				height: 250rpx;
				width: 100%;
				border-radius: 20rpx;
			}

			>view {
				position: absolute;
				top: 20rpx;
				left: 25rpx;
				// font-size: 44rpx;
				// font-weight: 700;
				// color: #fff;
				// font-family: FZYaoti;
			}
		}
	}

	.nf_products>view {
		display: flex;
		justify-content: space-between;
	}

	.nf_products>view>view:nth-child(1) {
		width: 49%;
		position: relative;
	}

	.nf_products>view>view:nth-child(1) image {
		width: 100%;
		height: 210rpx;
		border-radius: 12rpx;
	}

	.nf_products>view>view:nth-child(1)>view {
		position: absolute;
		top: 10%;
		left: 10%;
		font-size: 30rpx;
		color: #fff;
	}

	.nf_products>view>view:nth-child(2) {
		width: 49%;
		position: relative;
	}

	.nf_products>view>view:nth-child(2) image {
		width: 100%;
		height: 210rpx;
		border-radius: 12rpx;
	}

	.nf_products>view>view:nth-child(2)>view {
		position: absolute;
		top: 10%;
		left: 10%;
		font-size: 30rpx;
		color: #fff;
	}

	.organictable {
		margin-bottom: 25rpx;
	}

	.organictable>view {
		margin-top: 20rpx;
		display: flex;
	}

	.organictable>view>view:nth-child(1) {
		width: 49%;
		margin-right: 20rpx;
		box-shadow: 0 2px 5px 2px #eee;
		border-radius: 20rpx;
	}

	.organictable>view>view:nth-child(2) {
		width: 49%;

		>view:nth-child(1) {
			border-radius: 20rpx;
			padding: 10rpx 20rpx;
			box-shadow: 0 2px 5px 2px #eee;
			margin-bottom: 30rpx;

			>view {
				font-size: 30rpx;
				font-weight: 700;
				padding: 5rpx 0;
			}
		}

		>view:nth-child(2) {
			box-shadow: 0 2px 5px 2px #eee;
			border-radius: 20rpx;
			padding: 10rpx 20rpx;

			>view:nth-child(1) {
				display: flex;

				>view:nth-child(1) {
					font-size: 30rpx;
					margin: 10rpx 10rpx 0 0;
					font-weight: 700;
				}

				>view:nth-child(2) {
					font-size: 22rpx !important;
					color: #92c974;
					background-color: #d2f3be;
					padding: 4rpx 20rpx 0;
					border-radius: 50px;
					margin-top: 10rpx;
				}
			}

			>view:nth-child(2) {
				font-size: 23rpx !important;
				color: #2e9571;
				padding: 8rpx 0 5rpx 0;
				font-family: 'Microsoft Yahei';
			}

			>view:nth-child(3) {
				margin-top: 10rpx;
				display: flex;

				>image:nth-child(1) {
					height: 200rpx;
					width: 49%;
					margin-right: 10rpx;
				}

				>image:nth-child(2) {
					height: 200rpx;
					width: 49%;
				}
			}
		}
	}

	.organic {
		padding: 10rpx 20rpx;
		border-radius: 20rpx;

		>view:nth-child(1) {
			display: flex;
			justify-content: space-between;

			>view:nth-child(1) {
				font-size: 30rpx;
				font-weight: 700;
				margin-right: 10rpx;
			}

			>view:nth-child(2) {
				font-size: 22rpx;
			}
		}

		>view:nth-child(2) {
			font-size: 22rpx;
			color: #2e9571;
			padding: 0 15rpx;
		}

		>view:nth-child(3) {
			.swiper {
				height: 220rpx;

				.swiper-item {
					display: block;
					height: 220rpx;
					line-height: 220rpx;
					text-align: right;
					position: relative;
				}

				.swiper-item>image {
					width: 100%;
					height: 220rpx;
					display: block;
					// border-radius: 12rpx;
				}
			}
		}
	}

	.solarterms {
		display: flex;
		justify-content: flex-end !important;
	}

	.freshmi {
		font-size: 22rpx !important;
		font-weight: 400 !important;
		flex: 1;
		height: 30rpx;
		margin-right: 11rpx !important;
		background-color: #dc605e;
		border-radius: 20rpx 20rpx 0 20rpx;
		color: #fff;
		padding: 5rpx 6px;
	}

	.organicdesc {
		margin-top: 2rpx;
		font-size: 30rpx !important;
		font-weight: 700;
		flex: 1;
	}

	.keeplive {
		text-align: right;
		margin: 10rpx 0;
	}

	.hotrecommend {
		padding: 0 25rpx;
		position: relative;
		top: -45rpx;
	}

	.hotrecommend>view {
		font-size: 30rpx;
		font-weight: 700;
		margin-bottom: 20rpx;
	}

	.shopping>view {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.shopping-list {
		position: relative;
		width: 342rpx;
		padding: 0 0 10rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 -2px 8px 1px #eee;

		>view:nth-child(1) {
			image {
				width: 100%;
				height: 340rpx;
				border-radius: 15rpx 15rpx 0 0;
				display: block;
			}
		}

		>view:nth-child(2) {
			padding: 20rpx 15rpx;
			font-size: 30rpx;
			font-weight: 400;
			width: 300rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		>view:nth-child(3) {
			display: flex;
			justify-content: space-between;
			padding: 10rpx;

			>view:nth-child(1) {
				font-size: 28rpx;
			}

			>view:nth-child(2) {
				font-weight: 400;
				font-size: 24rpx;
				color: #ccc;
			}
		}

		>view:nth-child(4) {
			font-size: 26rpx;
			padding: 4px 10rpx;
			margin: 0 0 20rpx 10rpx;

		}
	}

	.shopping-address {
		position: absolute;
		top: 3%;
		left: 5%;
		border-radius: 50px;
		color: #fff;
		font-size: 24rpx;
		padding: 2rpx 10rpx;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.position-image {
		position: relative;

		.internetattestation {
			border-radius: 50px;
			color: #fff;
			font-size: 24rpx;
			padding: 2rpx 10rpx;

			image {
				position: absolute;
				bottom: -10rpx;
				width: 180rpx !important;
				height: 35rpx !important;
				display: block;
			}
		}
	}


	.advertising {
		position: fixed;
		top: 30%;
		left: 14%;
		text-align: center;
		z-index: 20000;
		color: #fff;

		>view {
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.advertising image {
		width: 550rpx;
		height: 570rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		z-index: 10;
	}

	.plantcourse {

		// margin-top: 10rpx;
		image {
			width: 100%;
			height: 220rpx;
			// border-radius: 12rpx;
		}
	}

	.text {
		// margin-bottom: 250rpx;
		padding-bottom: 110rpx;
	}

	.title-image {
		image {
			margin-left: -20rpx;
			width: 200rpx !important;
			height: 40rpx !important;
		}

	}

	.menber-price {
		// height: 30rpx;
		background: url('http://www.szzn.group/uploads/20221107/808c29547669f7e437106217b5ea8df6.png')no-repeat;
		background-size: 60% 100%;
		color: #3db963;

		text {
			font-size: 24rpx;
			color: #000;
		}
	}

	.xianmi {
		background-color: #dc605e;
		color: #fff;
		padding: 2rpx 22rpx 0;
		border-radius: 20rpx 20rpx 20rpx 0;
		font-size: 22rpx !important;
		height: 34rpx;
		margin-right: 22rpx;
	}

	.hot-tuijian {
		image {
			width: 220rpx;
			height: 45rpx;
		}
	}

	.jiankang {
		margin: 8rpx 0;
	}

	.title-image .height {
		height: 50rpx !important;
		margin-left: -10rpx;
	}
</style>
